﻿<!--
    * @Author Mangodai
    * @Date 8/30/2017 9:34 PM
-->
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>BlueDot Index</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta property="og:type" content="static web">
    <meta property="og:site_name" content="BlueDot">
    <meta property="og:auther" content="MangoDai">
    <meta property="og:url" content="http://yoursite.com/index.html">

    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"
          type="text/css">
    <link href="http://apps.bdimg.com/libs/bootstrap-glyphicons/1.0/css/bootstrap-glyphicons.css" rel="stylesheet"
          type="text/css">
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="http://apps.bdimg.com/libs/fontawesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <!-- font -->
    <link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">

    <link rel="icon" href="assets/img/favicon.ico">

    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/joinus.css">

</head>
<body style="background-color: #D4D4D4">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="mainNav">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html" id="navBrand">
                BlueDot
            </a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" id="navLabel">
            <ul class="nav navbar-nav navbar-right">
                <li class="nav-item"><a href="introduction.html">Introduction</a></li>
                <li class="nav-item"><a href="declaration.html">Declaration</a></li>
                <li class="nav-item"><a href="member.html">Team Member</a></li>
                <!-- <li class="nav-item"><a href="about.html">About Us</a></li> -->
                <li class="nav-item"><a href="joinUs.html">Join Us</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!-- main-->
<div class="container" style="margin-top: 120px;">
    <div class="row">
        <div class="col-md-7 col-sm-12 col-sm-offset-2">

            <form class="form-horizontal" role="form" id="contact" onsubmit="return false;">
                <div id="logo" class="bouncing">
                    <em class="icon-food"> <img src="assets/img/logo.jpg"
                                                style="border-radius:20px; width:70px;height:80px;"> </em>
                </div>
                <h1 id="title">Join us</h1>
                <p id="pre">
                    每天进步一点点&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我们在蓝点等你！
                </p>
                <!-- Form fields wrapper -->
                <div id="wrapper" class="clearfix">
                    <fieldset>
                        <div class="row" style="width: 100%;text-align:center">
                            <div class="form-group">
                                <label for="name" class="col-sm-3 col-xs-3 control-label">姓名</label>
                                <div class="col-sm-8 col-xs-8">
                                    <input id="name" name="name" type="text" placeholder="请输入您的真实姓名"
                                           class="form-control" required="required"
                                           pattern="^[\u4E00-\u9FA5]{1,6}$"
                                           data-validation-pattern-message="请正确输入您的姓名">
                                    <p style="margin-left: 15px;" class="help-block"></p>
                                </div>
                            </div>
                            <div class="form-group control-group">
                                <label for="schoolNumber" class="col-sm-3 col-xs-3 control-label">学号</label>
                                <div class="col-sm-8 col-xs-8">
                                    <input id="schoolNumber" name="schoolNumber" type="text"
                                           placeholder="请填写您的8位学号   eg：2017xxxx" class="form-control"
                                           required="required"
                                           pattern="^\d{8}$"
                                           data-validation-pattern-message="请正确输入您的学号">
                                    <p style="margin-left: 15px;" class="help-block"></p>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="qqNumber" class="col-sm-3 col-xs-3 control-label">QQ</label>
                                <div class="col-sm-8 col-xs-8">
                                    <input id="qqNumber" name="qqNumber" type="text" placeholder="请填写您的QQ号"
                                           class="form-control" required="required"
                                           pattern="^\d{5,12}$"
                                           data-validation-pattern-message="请正确输入您的QQ号">
                                    <p style="margin-left: 15px;" class="help-block"></p>
                                </div>
                            </div>
                            <input type="hidden" name="classes" value="2017">
                            <!--<div class="form-group">-->
                            <!--<label for="classes"  class="col-sm-3 col-xs-3 control-label">班级</label>-->
                            <!--<div class="col-sm-8 col-xs-8">-->
                            <!--<select id="classes" name="classes" class="form-control">-->
                            <!--<option value="1701">软件1701</option>-->
                            <!--<option value="1702">软件1702</option>-->
                            <!--<option value="1703">软件1703</option>-->
                            <!--<option value="1704">软件1704</option>-->
                            <!--<option value="1705">软件1705</option>-->
                            <!--<option value="1706">软件1706</option>-->
                            <!--<option value="1707">软件1707</option>-->
                            <!--<option value="1708">软件1708</option>-->
                            <!--<option value="1709">软件1709</option>-->
                            <!--<option value="1710">软件1710</option>-->
                            <!--<option value="1711">软件1711</option>-->
                            <!--<option value="1712">软件1712</option>-->
                            <!--<option value="1713">软件1713</option>-->
                            <!--<option value="物联1701">物联1701</option>-->
                            <!--</select>-->
                            <!--</div>-->
                            <!--</div>-->
                            <div class="form-group row">
                                <div class="col-sm-1 col-xs-1 col-sm-offset-7 col-xs-offset-7">
                                    <a class="btn btn-default" href="">重置</a>
                                </div>
                                <div class="col-sm-1 col-xs-1 col-sm-offset-1 col-xs-offset-1">
                                    <!--<a class="btn btn-default" onclick="register()">提交</a>-->
                                    <input class="btn btn-default" type="submit" onclick="register()" value="提交"/>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                </div>

            </form>
        </div>
    </div>
    <div class="col-md-offset-1 col-md-10 col-sm-12">
        <div class="row" id="userList contact">
            <div class="col-lg-12">
                <div class="table-responsive">
                    <table class="table table-border table-bordered table-bg table-sort">
                        <thead>
                        <tr class="text-c">
                            <th width="10%">ID</th>
                            <th width="45%">姓名</th>
                            <th width="45%">班级</th>
                        </tr>
                        </thead>
                        <tbody id="tableBody">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="modal fade" tabindex="-1" role="dialog" id="msgModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">Register</h4>
                    </div>
                    <div class="modal-body">
                        <p id="msg">One fine body&hellip;</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
</div>
<!-- //main-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/js/custom.js" type="text/javascript"></script>
<script src="assets/js/jqBootstrapValidation.js" type="text/javascript"></script>
<script src="assets/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="assets/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("input,select,textarea").not("[type=submit]").jqBootstrapValidation();
        $.ajax({
            // url: 'http://219.229.207.48:8080/register/user/register',
            url: 'http://127.0.0.1:8011/user/list',
            type: 'get', //GET
            dataType: "jsonp",
            jsonp: 'callback',
            jsonpCallback: 'callback',
            success: function (data) {
                for (i in data) {
                    var tr = "<tr>";
                    tr += "<td>" + data[i].id + "</td>"
                    tr += "<td>" + data[i].name + "</td>"
                    tr += "<td>" + data[i].classes + "</td>"
                    tr += "</tr>";
                    $('#tableBody').append(tr);
                }
                var table = $('table').dataTable({
                    lengthMenu: [[5, 10, 30, 25, 50, 100, -1], [5, 10, 30, 25, 50, 100, "所有"]],
                    language: {

                        "processing": "玩命加载中...",
                        "lengthMenu": "显示 _MENU_ ",
                        "zeroRecords": "对不起，查询不到任何相关数据",
                        "emptyTable": "无数据",
                        "info": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                        "infoEmpty": "显示第 0 至 0 项结果，共 0 项",
                        "infoFiltered": "(由 _MAX_ 项结果过滤)",
                        "infoPostFix": "",
                        "search": "搜索:",
                        "url": "",
                        "paginate": {
                            "first": "首页",
                            "previous": "上页",
                            "next": "下页",
                            "last": "末页"
                        },
                        "aria": {
                            "sortAscending": ": 以升序排列此列",
                            "sortDescending": ": 以降序排列此列"
                        }
                    },
                });
            },
            error: function (xhr, textStatus, errorThrown) {
                console.log(xhr);
                console.log(errorThrown);
                console.log(textStatus);
                $('#msg')[0].innerHTML = '链接服务器失败';
                modalShow();
            },
        });
    });
</script>
</body>
</html>

